<template>
	<div>
	<el-row>
		<el-col :sm="{span:10, offset:7}" :xs="{span:12,offset:6}" :md="{span: 5, offset: 9}" class="top">
			<img src="../assets/logo.png">
		</el-col>
	</el-row>
	<el-main>	
		<el-row>
		  	<el-col :span="12" :offset="6" :sm="{span: 5, offset: 9}">
		  		<el-input v-model="username" placeholder="请输入用户名"></el-input>
		  		<el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
		  		<el-button type="primary" @click="login">登录</el-button>
		  	</el-col>
		</el-row>
	</el-main>	
	</div>
</template>
<script>
	export default{
		name:'Login',
		data(){
			return{
				username:'',
				password:''
			}
		},
		methods:{
			login(){
				let obj={
					username:this.username,
					password:this.password
				}
				this.$http.post('/auth/user',obj).then((res)=>{
					if(res.data.success){//成功
						sessionStorage.setItem('blog-token',res.data.token);
						this.$message({
							type:'succsess',
							message:'登录成功',
							duration:1500
						});
						this.$router.push('/index');//登录成功跳转到index
					}else{
						this.$message({
							type:'error',
							message:res.data.info,
							duration:1500
						});
						sessionStorage.setItem('blog-token',null);//登录失败清空token
					}
				}).catch(function (error) {
    				console.log(error);
  				});
			}//login
		}//methods
	}
</script>
<style scoped>
	.top{
		text-align: center;
		margin-top: 20px;
	}
	.el-input{
		margin-top: 15px;
	}
	.el-button{
		width: 100%;
		margin-top: 15px;
	}
</style>